<script setup lang="ts">
import { getImageClassList, createImageClass, updateImageClass, deleteImageClass } from '@/api/image_class'
import FormDrawer from '@/components/FormDrawer.vue'
import { showMessage } from '@/utils/elementTools'
const formDrawerRef = useTemplateRef<HTMLInputElement>('formDrawerRef')
// 加载动画
const loading = ref(false)
const activeId = ref(0)
const list = ref([])
// 分页
const total = ref(0)
const currentPage = ref(1)
const limit = ref(10)

// 表单
const formRef = useTemplateRef<HTMLInputElement>('formRef')
const editId = ref(0)
const drawerTitle = computed(() => (editId.value == 0 ? '新增' : '编辑'))
const form = reactive({ name: '', order: 50 })
const rules = {
  name: [{ required: true, message: '请输入分类名称', trigger: 'blur' }]
}
const handleSubmit = () => {
  formRef.value?.validate((valid: Boolean) => {
    if (!valid) return
    formDrawerRef.value?.showLoading()
    const fun = editId.value ? updateImageClass(editId.value, form) : createImageClass(form)
    fun
      .then((res) => {
        showMessage(drawerTitle.value + '成功', 'success')
        getData(editId.value ? currentPage.value : 1)
      })
      .catch((err) => {
        console.log(err)
      })
      .finally(() => {
        formDrawerRef.value?.hideLoading()
      })
    formDrawerRef.value?.hideDrawer()
  })
}
// 获取数据
function getData(p: number = 1) {
  currentPage.value = p
  loading.value = true
  getImageClassList(currentPage.value, limit.value)
    .then((res) => {
      list.value = res.data.list
      total.value = res.data.totalCount
      // activeId.value = list.value[0]?.id
      if (list.value[0]) {
        handleChangeActiveId(list.value[0].id)
      }
    })
    .finally(() => {
      loading.value = false
    })
}
onMounted(() => {
  getData()
})
const handleCreate = () => {
  editId.value = 0
  form.name = ''
  form.order = 50
  formDrawerRef.value?.showDrawer()
}

function handleEdit(item: any) {
  editId.value = item.id
  form.name = item.name
  form.order = item.order
  formDrawerRef.value?.showDrawer()
}
function handleDelete(id: number) {
  deleteImageClass(id).then((res) => {
    showMessage('删除成功', 'success')
    getData()
  })
}
const emit = defineEmits(['change'])
// 切换分类
function handleChangeActiveId(id: number) {
  activeId.value = id
  emit('change', id)
}

defineExpose({ handleCreate })
</script>

<template>
  <el-aside width="220px" class="image-aside" v-loading="loading">
    <div class="top">
      <AsideList
        :active="activeId == item.id"
        v-for="item in list"
        :key="item.id"
        @edit="handleEdit(item)"
        @delete="handleDelete(item.id)"
        @click="handleChangeActiveId(item.id)"
      >
        {{ item.name }}</AsideList
      >
    </div>
    <div class="bottom">
      <el-pagination
        background
        layout="prev, next"
        :total="total"
        :current-page="currentPage"
        :page-size="limit"
        @current-change="getData"
      />
    </div>
  </el-aside>
  <FormDrawer :title="drawerTitle" ref="formDrawerRef" @submit="handleSubmit">
    <el-form :model="form" ref="formRef" :rules="rules" label-width="80px" :inline="false">
      <el-form-item label="分类名称" prop="name">
        <el-input v-model="form.name" placeholder="请输入分类名称" />
      </el-form-item>
      <el-form-item label="排序" prop="order">
        <el-input-number v-model="form.order" :min="1" :max="1000" />
      </el-form-item>
    </el-form>
  </FormDrawer>
</template>

<style lang="scss" scoped>
.image-aside {
  border-right: 1px solid #eee;
  position: relative;

  .top {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 50px;
    overflow-y: auto;
  }

  .bottom {
    position: absolute;
    bottom: 0;
    right: 0;
    left: 0;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
</style>
